<template>
	<view style="background-color: #f6f6f6">
		<u-navbar :background="{ 'backgroundColor': `rgba(255,255,255,${navBg})`}" :is-back="false"
			back-icon-color="#000" :border-bottom="false" title=" ">
			<view class="header-wrapper">
				<view class="icon-wrapper">
					<u-icon @click="onEdit" style="margin-right: 34upx;" name="/static/images/icon_edit_bold.png"
						size="43"></u-icon>
					<u-icon @click="onSearch" name="search" size="43"></u-icon>
				</view>
				<view class="header-tab">
					<u-tabs bg-color='rgba(0,0,0,0)' active-color="#FF5E61" :list="list" :is-scroll="false"
						:current="current" @change="change"></u-tabs>
				</view>
			</view>
		</u-navbar>
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @up="upCallback">
			<StarPostList :list="postList" :my_user="vuex_user" @selectPost="selectPost" @longpressPost="longpressPost"
				@clickUserAvatar="clickPostUserAvatar" @clickUserNickname="clickPostUserNickname"
				@clickFocusUser="clickPostFocusUser" @clickChatUser="clickPostChatUser">
			</StarPostList>
		</mescroll-body>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import StarPostList from "@/uni_modules/star-community/components/star-post-list/star-post-list.vue";
	import {
		mapMutations
	} from 'vuex'
	import {
		getPost,
		likePost
	} from "@/api/discover";
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [MescrollMixin, PageExposure], // 使用mixin
		components: {
			StarPostList,
		},
		data() {
			return {
				list: [{
						name: "最热",
						value: "view_num"
					},
					{
						name: "最新",
						value: "id"
					},
				],
				navBg: 0,
				current: 0,
				postList: [],
				downOption: {
					use: false, // 不启用mescroll下拉刷新，使用页面原生下拉刷新
				},
				upOption: {
					isBounce: false,
					noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					toTop: {
						right: "20rpx",
						bottom: "140rpx",
						safearea: true,
						width: "80rpx",
						radius: "50%",
					},
				},
			};
		},
		// 原生下拉刷新，推荐
		onPullDownRefresh() {
			this.mescroll.resetUpScroll();
			uni.stopPullDownRefresh();
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top
			this.navBg = percent > 1 ? 1 : percent
		},
		onLoad() {},
		methods: {
			...mapMutations(['UPDATEPOSTLIKES']),
			onEdit() {
				this.showToast({
					type: "error",
					icon: false,
					title: "您暂无权限写帖、请联系客服开通。",
				});
			},
			onSearch() {
				this.goto("/pages/goods_search/goods_search?mode=post");
			},
			async change(index) {
				this.current = index
				this.mescroll.resetUpScroll();
			},
			// // mescroll下拉刷新的回调
			// downCallback() {
			// 	// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// 	// loadSwiper();
			// 	// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			// 	this.mescroll.resetUpScroll()
			// },
			// 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			async upCallback(page) {
				try {
					// 请求数据列表
					let list = await this.getPostList(page);
					// 设置列表数据
					if (page.num === 1) this.postList = []; // 如果是第一页需手动制空列表
					this.postList = [...this.postList, ...list]; // 追加新数据
					// 联网成功的回调,隐藏下拉刷新和上拉加载的状态
					this.mescroll.endSuccess(list.length);
				} catch (err) {
					console.log(err);
				}
			},
			// 拉取帖子列表
			async getPostList(page) {
				const order_column = this.list[this.current].value
				const {
					s,
					d
				} = await getPost({
					pagesize: page.size,
					page: page.num,
					order_column
				});
				const {
					data,
					num
				} = d || {}

				if (s === 0) {
					const _data = data?.data || [];

					this.UPDATEPOSTLIKES(_data);
					return _data
				}
				return []
			},
			// 选中贴子
			selectPost(post) {
				// this.goto(`../post-detail/post-detail?id=${post.id}`);
			},
			// 长按帖子
			longpressPost(post) {
				// console.log("longpressPost");
				// this.showPostMoreActionSheet(post);
			},
			// 点击帖子中的关注用户
			clickPostFocusUser(post) {
				uni.showToast({
					title: "关注成功",
				});
			},
			// 点击帖子中的私聊用户
			clickPostChatUser(post) {
				uni.showToast({
					title: "私聊界面开发中",
					icon: "none",
				});
			},
			// 点击帖子更多
			clickMore(post) {
				console.log("clickMore");
				this.showPostMoreActionSheet(post);
			},
			// 点击分享帖子
			clickSharePost(post) {
				console.log("clickSharePost");
			},
			// 点击评论帖子
			clickCommentPost(post) {
				console.log("clickCommentPost");
				// 建议跳转后自动下滑到评论区
				//   this.goto(`../post-detail/post-detail?id=${post.id}&comment=yes`);
			},
			// 点击帖子用户头像
			clickPostUserAvatar(post) {
				// this.goto(`../homepage/homepage?id=${post.user_id}`);
			},
			// 点击贴子用户昵称
			clickPostUserNickname(post) {
				// this.goto(`../homepage/homepage?id=${post.user_id}`);
			},
			// 点击发布帖子按钮
			clickReleasePost() {
				this.goto("../post-release/post-release");
			},
			goto(url) {
				uni.navigateTo({
					url,
				});
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url &&
							uni.navigateTo({
								url: params.url,
							});
					},
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.header-wrapper {
		display: flex;
		position: realative;
		align-items: center;
		flex: 1;

		.header-tab {
			width: 200rpx;
			margin-left: 247rpx;
		}

		.icon-wrapper {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			left: 26upx;
		}
	}
</style>